---
title: Draggables
description: Allows movement of blocks, such as paragraphs or tables, within the editor.
component: true
docs:
  - route: /docs/dnd
    title: Drag & Drop
  - route: /docs/components/tooltip
    title: Tooltip
---

<ComponentPreview name="playground-demo" id="dnd" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
<TabsTrigger value="cli">CLI</TabsTrigger>
<TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx @udecode/plate-ui@latest add draggable
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>

Install the following dependencies:

- [Drag & Drop](/docs/dnd)
- [Tooltip](/docs/components/tooltip)

</Step>

<Step>

Copy and paste the following code into your project.

</Step>

<ComponentSource name="draggable" />
<ComponentSource name="with-draggables" />

<Step>

Update the import paths to match your project setup.

</Step>

</Steps>

</TabsContent>

</Tabs>

## Usage

To use the Draggables component in your Plate editor, follow these steps:

1. Import the necessary plugins and components:

```tsx
import { DndPlugin } from '@udecode/plate-dnd';
import { NodeIdPlugin } from '@udecode/plate-node-id';

// local imports
import { createPlateUI } from '@/lib/plate/create-plate-ui';
import { withDraggables } from './withDraggables';
```

2. Create the editor with these plugins and use `withDraggables` to add a drag button next to each block:

```tsx
const plugins = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    NodeIdPlugin,
    DndPlugin.configure({ options: { enableScroller: true } }),
  ],
  override: {
    components: withDraggables(createPlateUI()),
  }
});
```

3. Wrap your `Plate` component with the `DndProvider` from `react-dnd`:

```tsx
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

<DndProvider backend={HTML5Backend}>
  <Plate editor={editor}>
    <PlateContent />
  </Plate>
</DndProvider>
```

## Examples

<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />